我學會表格置左對齊了！😊🎉🎉

資料綁定 (Data Binding) 簡介

Template (.html) 與 Component (.ts) 互相傳遞資料的機制。

編號	方式	範例	html -?- ts
１	文字插值 Text Interpolation	<p>{{ value }}</p>	←
２	屬性繫結 Property Binding	[disabled] = “value”	←
３	事件繫結 Event Binding	(click)=”add()”	→
４	雙向繫結 Two-Way Binding	[(ngModel)] = “value”	↔

２屬性繫結 Property Binding

DOM ← Component

NgClass 與 NgStyle

Angular 提供可用來動態改變 DOM 元素 CSS 的指令。

注意事項

❌盡量避免在資料綁定時做以下動作：

留意命名衝突

Angular 優先以下邏輯來載入：

1. 範本變數名稱 (The template variable name)
2. 指令上下文中的名稱 (A name in the directive's context)
3. 元件成員名稱 (The component's member names)

舉個栗子🌰：

<h1>Hello, {{customer}}</h1>
<ul>
  <li *ngFor="let customer of customers">{{ customer.value }}</li>
</ul>

customers = [{value: 'Ebony'}, {value: 'Chiho'}];
customer = 'Padma';

顯示結果為：

Hello, Padma

• Ebony
• Chiho

*ngFor 會載入 customers 陣列內的項目，跟 customer 變數無關。
實務上盡量還是避免類似命名，回頭看自己有機率混亂。

資料來源

Angular - 瞭解繫結
Angular 基礎｜從 Todo List 認識四種資料綁定 - HackMD
[Angular 深入淺出三十天] Day 07 - 基礎結構說明（二）